<template>
	<el-dialog title="查看详情" :visible.sync="outerVisible" width="80%">
		<div class="review-content">
			<div class="main-content detailBoxStyle">
				<div class="review-content">
					<p class="name">代理账号信息</p>
					<div class="review-flex">
						<el-table
							border
							size="mini"
							:data="[rowData]"
							style="width: 100%"
							:header-cell-style="getRowClass"
							highlight-current-row
						>
							<el-table-column
								align="center"
								prop="proxyName"
								label="代理账号"
								show-overflow-tooltip
								min-width="100"
							>
								<template slot-scope="scope">
									{{ scope.row.proxyName || '-' }}
								</template>
							</el-table-column>
							<el-table-column
								align="center"
								prop="name"
								label="代理层级"
								show-overflow-tooltip
								min-width="100"
							>
								<template slot-scope="scope">
									{{ scope.row.proxyLevel }}/{{
										scope.row.proxyLevelName
									}}
								</template>
							</el-table-column>
							<el-table-column
								align="center"
								prop="parentProxyName"
								label="直属上级"
								show-overflow-tooltip
								min-width="100"
							>
								<template slot-scope="scope">
									{{ scope.row.parentProxyName || '-' }}
								</template>
							</el-table-column>
							<el-table-column
								align="center"
								prop="topProxyName"
								label="所属总代"
								show-overflow-tooltip
								min-width="100"
							>
								<template slot-scope="scope">
									{{ scope.row.topProxyName || '-' }}
								</template>
							</el-table-column>
							<el-table-column
								align="center"
								prop="businessModel"
								label="业务模式"
								show-overflow-tooltip
								min-width="100"
							>
								<template slot-scope="scope">
									{{
										mappingBusinessModel(
											scope.row.businessModel
										) || '-'
									}}
								</template>
							</el-table-column>
							<el-table-column
								align="center"
								prop="registerTime"
								label="注册时间"
								show-overflow-tooltip
								min-width="200"
							>
								<template slot-scope="scope">
									{{ scope.row.registerTime || '-' }}
								</template>
							</el-table-column>
						</el-table>
					</div>
				</div>
				<RebateTable :tableData="tableData" :tableLoading="loading" />
				<BetTable :rowData="rowData" :venueMap="venueMap" />
			</div>
		</div>
	</el-dialog>
</template>

<script>
import list from '@/mixins/list'
import summaryList from './summaryList'
import RebateTable from './rebateTable.vue'
import BetTable from './betTable.vue'

export default {
  components: {
    RebateTable,
    BetTable
  },
  mixins: [list, summaryList],
  props: {
    value: {
      type: Boolean,
      default: false
    },
    rowData: {
      type: Object,
      default: () => { }
    },
    changeMapStatus: {
      type: Object,
      default: () => { }
    }
  },
  data() {
    return {
      outerVisible: false,
      tableData: [],
      venueMap: null
    }
  },
  watch: {
    value: {
      handler(val) {
        this.outerVisible = val
      },
      immediate: true
    },
    outerVisible(val) {
      this.$emit('input', val)
    }
  },
  created() {
  },
  methods: {
    loadData() {
      let params = {
        memberId: this.rowData.memberId,
        recalType: this.rowData.changeStatus,
        reportDate: this.rowData.reportDate,
        proxyId: this.rowData.proxyId
      }
      params = this.getParams(params)
      delete params.pageNum
      delete params.pageSize
      this.loading = true
      this.venueMap = null
      this.$api.reportRecalProxyVenueRecalDetailList(params).then(res => {
        this.tableData = res.data || []
        this.loading = false
        if (this.tableData.length) {
          const obj = {}
          this.tableData.map(item => {
            if (item.venueCode) {
              obj[item.venueCode] = {
                venueCode: item.venueCode,
                venueName: item.venueName,
                validBetAmountRecal: item.validBetAmountRecal,
                rebateAmountRecal: item.rebateAmountRecal,
                rebateRealAmount: item.rebateRealAmount,
                teamRebateAmountRecal: item.teamRebateAmountRecal
              }
            }
          })
          this.venueMap = obj
        } else {
          this.venueMap = {}
        }
      }).catch(() => {
        this.venueMap = {}
        this.loading = false
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.table-flex {
	display: flex;
	width: 80%;
	margin-top: 15px;
}
::v-deep .el-dialog__header {
	text-align: left;
	color: #909399;
	font-weight: 700;
}
::v-deep .rempadding .el-dialog__body {
	padding: 15px 20px;
}
.name {
	font-weight: 600;
	margin-bottom: 15px;
}
.review-content {
	width: 100%;

	.head {
		height: 70px;
		line-height: 70px;
		width: 100%;
		background: #000;
		border-radius: 2px;
		padding: 0 30px;
		.title {
			font-weight: 600;
			color: rgb(192, 190, 190);
		}
		.right-btn {
			float: right;
		}
	}
	.main-content {
		.review-content {
			min-height: 150px;
			border-top: 0px;
			padding: 0 30px;
			.name{
				font-weight: 600;
				margin-bottom: 15px;
			}

			.review-flex {
				position: relative;
				width: 100%;
				div {
					display: inline-block;
					width: 32%;
					line-height: 30px;
				}
				.show-remark {
					word-wrap: break-word;
					vertical-align: top;
				}
			}
		}
		.more-height {
			height: 200px;
		}
	}
}

</style>
